<template>
    <div>
        <header class="resviseTop">
            <img src="../../images/left.png" alt="" @click="$router.back(-1)">
            <span class="resvise_title">个人资料</span>
        </header>
        <div class="bg_fff">
            <div class="top_potos">
                <div>
                    <div>
                        <img src="../../img_myself/c1.png" alt="">
                        <span>修改头像</span>
                    </div>
                    <img :src="invite.user_avatar" alt="" class="topload_img">
                    <input type="file" @change="preview1($event)" accept="image/gif, image/jpeg, image/png, image/jpg">
                </div>
            </div>
        </div>
        <div class="bg_fff">
            <div class="top_potos" @click="inputParam(1)">
                <div>
                    <div>
                        <img src="../../img_myself/c2.png" alt="">
                        <span>昵称</span>
                    </div>
                    <span>{{invite.user_nickname}}</span>
                </div>
            </div>
        </div>

        <div class="bg_fff MarginTop" @click="addressHiden = !addressHiden">
            <div class="top_potos">
                <div>
                    <div>
                        <img src="../../img_myself/c3.png" alt="">
                        <span>选择地区</span>
                    </div>
                    <span v-if="invite.city"> {{ invite.city }}</span>
                    <span v-else>未设置</span>
                </div>
            </div>
        </div>

        <div class="bg_fff">
            <div class="top_potos" @click="inputParam(2)">
                <div>
                    <div>
                        <img src="../../img_myself/c4.png" alt="">
                        <span>QQ号码</span>
                    </div>
                    <span>{{invite.user_qq}}</span>
                </div>
            </div>
        </div>
        <div class="bg_fff ">
            <div class="top_potos">
                <div>
                    <div>
                        <img src="../../img_myself/c5.png" alt="">
                        <span>手机号码</span>
                    </div>
                    <span>{{invite.user_mobile}}</span>
                </div>
            </div>
        </div>
        <router-link to="/task/Forget">
            <div class="bg_fff MarginTop">
                <div class="top_potos">
                    <div>
                        <div>
                            <img src="../../img_myself/c6.png" alt="">
                            <span>设置登录密码</span>
                        </div>
                    </div>
                </div>
            </div>
        </router-link>


        <div v-if="addressHiden">
            <div class="box_show" @click.stop="addressHiden = !addressHiden"></div>
            <div class="regions-body">
                <ul v-if="!regionsList.city_list">
                    <li v-for="list in regionsList.province_list" @click="regions(list)">{{ list.provincename }}</li>
                </ul>
                <div v-else>
                    <ul v-if="cityTrue">
                        <li v-for="list in regionsList.city_list" @click="regions(0,list)">{{ list.cityname }}</li>
                    </ul>
                    <ul v-else>
                        <li v-for="list in regionsList.area_list" @click="regions(0,0,list)">{{ list.areaname }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--背景颜色-->
        <div class="fixedCes"></div>
    </div>
</template>

<script>
    import Vue from 'vue'
    // import VDistpicker from 'v-distpicker'
    import * as qiniu from 'qiniu-js';
    import api from '../../utils/api';
    import {GenNonDuplicateID} from '../../utils/config';
    import {MessageBox} from 'mint-ui';

    export default {
        name: "Myinformation",
        data: () => ({
            invite: [],
            regionsList: [],
            addressHiden: false,
            province_id: 0, //省
            city_id: 0, //市
            area_id: 0, //区
            cityTrue: true,
            regionsText: ''

        }),
        methods: {
            selected(data) {
                this.relationships(dataress.toString(), 4)
            },
            async preview1(file, int = false) {
                var _that = this;
                var file = file.target.files[0];
                var img = new Image(), url = img.src = URL.createObjectURL(file)

                img.onload = function () {
                    URL.revokeObjectURL(url)
                };
                if (file) {
                    let putExtra = {
                        fname: file.name,
                        params: {},
                        mimeType: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
                    };
                    let config = {
                        useCdnDomain: true,
                        region: null
                    };
                    let observer = {
                        next(res) {
                        },
                        error(err) {
                            return false;
                        },
                        complete(res) {
                            _that.relationships('https://imgapp.renqidaren.com/' + res.key, 3)
                        }
                    }
                    // 获取七牛token
                    let resp = await api.request('/qiniu_token', 'get', {})
                    var observable = qiniu.upload(file, GenNonDuplicateID(32), resp.data.data, putExtra, config)
                    observable.subscribe(observer)
                }
            },
            async relationships(option, type) {
                var _that = this;
                var params = {
                    option: option,
                    type: type,
                }
                await api.request('/user/setUserInfo', 'post', params).then(function (res) {
                    _that.$toast(res.data.message);
                    _that.user()
                })
            },
            async inputParam(type) {
                MessageBox.prompt('请输入修改内容').then(({value, action}) => {
                    this.relationships(value, type)
                });
            },
            async user() {
                var _that = this;
                await api.request('/user', 'get', {}).then(function (res) {
                    _that.invite = res.data.data
                })
            },
            async regions(province = 0, city = 0, area = 0) {
                var _that = this;
                if (province != 0) {
                    _that.province_id = province.id;
                    _that.cityTrue = true;
                    _that.regionsText = province.provincename + '  ';
                }
                if (city != 0) {
                    _that.city_id = city.id;
                    _that.cityTrue = false;
                    _that.regionsText = _that.regionsText + city.cityname + '  '
                }

                if (area != 0) {
                    _that.area_id = area.id;
                    _that.regionsText = _that.regionsText + area.areaname;
                    let option = _that.province_id + ',' + _that.city_id + ',' + _that.area_id + ',' + _that.regionsText;
                    _that.relationships(option, 4)
                    _that.addressHiden = false;
                }

                var regionsId = {
                    area_id: _that.area_id,
                    city_id: _that.city_id,
                    province_id: _that.province_id
                }

                await api.request('/regions', 'get', regionsId).then(function (res) {
                    _that.regionsList = res.data.data;
                })
            }
        },
        mounted() {
            // 获取个人信息
            this.user();
            // 获取地址信息
            this.regions();
        }
    }
</script>

<style scoped="css">
    @import "../../style/myinformation.css";

    .regions-body {
        position: fixed;
        bottom: 0;
        height: 50vh;
        overflow: auto;
        width: 100%;
        background: #FFF
    }

    .regions-body li {
        padding: 0.2rem;
        border-bottom: 0.02rem solid #eee;
    }
</style>
